<style lang="less">
@import "../../styles/common.less";
.ivu-table .table-info-normal td {
  background-color: #2db7f5;
}

.ivu-table .table-info-live td {
  background-color: #e2fcde;
}

.ivu-table .table-info-not-live td {
  background-color: #fee6d4;
}
.ivu-table .table-info-error td {
  background-color: #ffe3e3;
}

.ivu-table .table-info-shrink td {
  background-color: lightgray;
  // margin-left: 10;
}
</style>

<template>
  <div class="margin-top-10">
    <Row type="flex" justify="space-between">
      <Row>
        <Input
          v-model.trim="queryForm.group_name"
          @on-enter="searchRecord"
          placeholder="请输入集团名称"
          style="width:150px;margin-right:8px"
        ></Input>
        <Input
          v-model.trim="queryForm.campus_name"
          @on-enter="searchRecord"
          placeholder="请输入校区名称"
          style="width:150px;margin-right:8px"
        ></Input>
        <Input
          v-model.trim="queryForm.class_name"
          @on-enter="searchRecord"
          placeholder="请输入班级名称"
          style="width:150px;margin-right:8px"
        ></Input>
        <Input
          v-model.trim="queryForm.name"
          @on-enter="searchRecord"
          placeholder="请输入学生姓名"
          style="width:150px;margin-right:8px"
        ></Input>
        <!-- <Select v-model="queryUserType" style="width:150px;margin-right:8px" placeholder="请选择用户类型">
          <Option value key>不限</Option>
          <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select> -->
        <DatePicker
          type="datetimerange"
          v-model="queryDateRange"
          placeholder="选择时间段"
          format="yyyy-MM-dd HH:mm"
          style="width: 300px;margin-right:8px"
        ></DatePicker>
        <Button @click="searchRecord" type="primary">查询</Button>
      </Row>
      <Row style="display: none">
        <Button>导出</Button>
      </Row>
    </Row>
    <div class="margin-top-10">
      <Table
        :row-class-name="rowClassName"
        :columns="recColumn"
        :data="pageData"
        :loading="tableLoading"
        ref="recTable"
      ></Table>
    </div>
    <Row type="flex" justify="end" class="margin-top-10">
      <Page
        :total="dataTotal"
        :current="pageNum"
        :page-size="pageSize"
        @on-change="changePageNum"
        show-total
      >总共：{{dataTotal}}条</Page>
    </Row>
    <Modal v-model="recordModal" class-name="vertical-center-modal">
      <img style="display:block;margin:0 auto;max-width:400px;" :src="recordImg">
      <div slot="footer">
        <Button type="primary" @click="recordModal=false;recordImg=''">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getAvatar,
  getStudentRecord,
  getStudentCapturePhoto,
  getDownloadUrl
} from "../../controllers/record";

import Ajax from "../../libs/ajax";
import Constant from "../../libs/constants";
import _ from "lodash";
import fakeAvatar from "../../images/default_avatar.png";
import DateUtils from "../../../node_modules/iview/src/utils/date";
import moment from "moment";

export default {
  data() {
    // 默认检索3天
    const from = moment()
      .subtract(2, "days")
      .format("YYYYMMDD");
    const to = moment().format("YYYYMMDD") + "2359";
    return {
      queryForm:{
        group_name:'',
        campus_name:'',
        class_name:'',
        name:''
      },
      tableLoading: true,
      queryDateRange: [
        DateUtils.parse(from, "yyyyMMdd"),
        DateUtils.parse(to, "yyyyMMddHHmm")
      ],
      recColumn: [
        {
          title: "抓拍照片",
          key: "c_photo",
          align: "center",
          width: 200,
          
          render: (h, { row }) => {
            //拼装url
            let imgSrc = row.c_photo_path?row.c_photo_path:row.c_photo;      
            return (
              <div>
                <img onClick={()=>{this.showRecordModal(row)}} class="user-avatar" alt="抓拍照片" src={imgSrc} />
              </div>
            );
          }
          /*
          render: (h, { row }) => {
            return (
              <div class="operate-column">
                <i-button type="text" onClick={()=>{this.showRecordModal(row)}}>查看</i-button>
              </div>
            );
          } 
          */   
        },
        {
          title: "学生ID",
          key: "s_id",
          align: "center",
          width: 200,
        },
        // {
        //   title: "用户类型",
        //   key: "s_type",
        //   align: "center",
        //   width: 200,
        //   render: (h,{row}) => {
        //     const typeName = row.s_type === 1 ? '黑名单' : row.s_type === 2 ? '学生' : row.s_type === 3 ? 'VIP' : '陌生人'
        //     return (
        //       <span>{typeName}</span>
        //     )
        //   }
        // },
        {
          title: "集团名称",
          key: "group_name",
          align: "center",
          width:200,
        },
        {
          title: "校区ID",
          key: "campus_id",
          align: "center",
          width:200,
        },
        {
          title: "教室ID",
          key: "classroom_id",
          align: "center",
          width:200,
        },
        // {
        //   title: "班级名称",
        //   key: "class_name",
        //   align: "center",
        //   width:200,
        // },
        {
          title: "摄像头ID",
          key: "ipc_id",
          align: "center",
          width: 200,
        },
        // {
        //   title: "摄像头名字",
        //   key: "d_name",
        //   align: "center",
        //   width: 200,
        // },
        {
          title: "抓拍时间",
          key: "c_time",
          align: "center",
          minWidth: 200,
          render: (h, {row}) => {
            const time = moment(row.c_time*1000).format('YYYY-MM-DD HH:mm:ss');
            return (
              <span>{time}</span>
            )
          }
        },
        // {
        //   title: "抓拍下载",
        //   align: "center",
        //   width: 200,
        //   render: (h, { row }) => {
        //     let id = row.rec_id;
        //     let type = "register";
        //     let userId = row.user_id;
        //     // return (<div><img class="user-avatar" alt="显示头像" src={imgSrc}/></div>);
        //     // return (<a href='/api/record/download_capture?rec_id=${id}&type=${type}' >抓拍下载</a>);
        //     return h(
        //       "a",
        //       {
        //         attrs: {
        //           // href:`/api/record/download_capture?rec_id=${id}&type=${type}`,
        //         },
        //         on: {
        //           click: () => {
        //             getDownloadUrl(id, type).then(json => {
        //               window.json = json;
        //               if (json.code == 0) {
        //                 let path = json.data.path;
        //                 let name = json.data.name;
        //                 let dir = json.data.dir;
        //                 this.downloadByIframe(dir, path, name);
        //               }
        //             });
        //           }
        //         }
        //       },
        //       "抓拍下载"
        //     );
        //   }
        // }
      ],
      pageData:[],
      dataTotal:0,
      pageNum:1,
      pageSize: Constant.PAGE_SIZE,
      queryWord: "",
      typeList: [],
      queryUserType: "",
      imgList: [],
      recordImg:'',
      recordModal: false
    };
  },
  created() {
    this.getRecords();
  },
  methods: {
    rowClassName(row, index) {
      let cls = "";
      // if (row.isExpand) {
      //   cls = "table-info-shrink ";
      // }
      if (row.liveness == "0") {
        cls += "table-info-not-live";
      } else if (row.liveness == "1") {
        cls += "table-info-live";
      } else if (row.liveness == "-2") {
        cls += "table-info-error";
      }
      return cls;
    },
    getRecords() {
      //获取分页参数，请求后端数据
      this.tableLoading = true;
      let dateFrom = "";
      let dateTo = "";
      if (
        this.queryDateRange.length > 1 &&
        this.queryDateRange[0] &&
        this.queryDateRange[1]
      ) {
        dateFrom = Math.floor(+this.queryDateRange[0]/1000);
        dateTo = Math.floor(+this.queryDateRange[1]/1000);
      }
      getStudentRecord({
          ...this.queryForm,
          type: this.queryUserType,
          date_from:dateFrom,
          date_to:dateTo,
          page_num:this.pageNum,
          page_size:this.pageSize,
      }).then(json => {
        this.tableLoading = false;
        //检测状态码
        if (json.code !== 0) {
          //非正常就返回空表
          return;
        }
        let data = json.data;
        //检测数据块存在及长度
        if (data === undefined) {
          return;
        }
        this.dataTotal = data.total
        this.pageData = data.result||[]
      });
    },
    changePageNum(page) {
      if(page == this.pageNum) return
      this.pageNum = page;
      let pageData = [];
      this.getRecords()
    },
    downloadByIframe(dir, path, name) {
      let url =
        Ajax.BASE_URL +
        `/api/record/download_capture?path=${path}&dir=${dir}&name=${name}`;
      var iframe = document.getElementById("myIframe");
      if (iframe) {
        iframe.src = url;
      } else {
        iframe = document.createElement("iframe");
        iframe.style.display = "none";
        iframe.src = url;
        iframe.id = "myIframe";
        document.body.appendChild(iframe);
      }
    },
    searchRecord() {
      if (
        this.queryDateRange.length == 0 ||
        !this.queryDateRange[0] ||
        !this.queryDateRange[1]
      ) {
        this.$Message.warning("请选择时间段");
        return;
      }
      this.pageNum = 1;
      this.getRecords();
    },
    showRecordModal(row) {
      this.recordModal = true;
      this.recordImg = row.c_photo_path?row.c_photo_path:row.c_photo
    }
  }
};

function transHistoryData(data) {
  // //检测状态码
  // if (json.code !== 0) {
  //     //非正常就返回空表
  //     return {total: 0, result: {}};
  // }
  // let data = json.data;
  // //检测数据块存在及长度
  // if (data === undefined) {
  //     return {total: 0, result: {}};
  // }

  let { total, result } = data;

  return {
    total: total,
    data: result
  };
}

function transAvatar(json) {
  //检测状态码
  if (json.code !== 0) {
    //非正常就返回空表
    return { user_avatar: "", user_capture: "" };
  }
  let data = json.data;
  //检测数据块存在及长度
  if (data === undefined || data.length === 0) {
    return { user_avatar: "", user_capture: "" };
  }
  //提取->检验->组装
  return data;
}
</script>
